variables

src/actions/variables.ts

@@ -0,0 +1,51 @@
+"use server";
+
+import { apiConfig } from "@/lib/apiConfig";
+import { apiHandler } from "@/lib/apiHandler";
+import { CreateVariableDto } from "@/rules/validations";
+import { SeverActionResponse, Variables } from "@/types";
+import { getErrorMessage } from "@/utils/helpers";
+import { Tags } from "@/utils/tags";
+import { revalidateTag } from "next/cache";
+
+export async function getVariables(): Promise<
+	SeverActionResponse<Variables[]>
+> {
+	try {
+		const endpoint = apiConfig.variables.root();
+		const variables = await apiHandler<Variables[]>({
+			endpoint,
+			method: "GET",
+			next: { tags: [Tags.variables] },
+		});
+		return { results: variables };
+	} catch (error) {
+		return { error: getErrorMessage(error) };
+	}
+}
+export async function createVariables(data: CreateVariableDto) {
+	try {
+		const endpoint = apiConfig.variables.root();
+		await apiHandler<Variables[]>({
+			endpoint,
+			method: "POST",
+			body: data,
+		});
+		revalidateTag(Tags.variables);
+	} catch (error) {
+		return { error: getErrorMessage(error) };
+	}
+}
+export async function updateVariables(id: string, data: CreateVariableDto) {
+	try {
+		const endpoint = apiConfig.variables.get(id);
+		await apiHandler<Variables[]>({
+			endpoint,
+			method: "PATCH",
+			body: data,
+		});
+		revalidateTag(Tags.variables);
+	} catch (error) {
+		return { error: getErrorMessage(error) };
+	}
+}

src/app/(dashboard)/_home/chart/SalesChart.tsx

@@ -36,7 +36,7 @@ interface CellData {
 	revenue: string;
 }
 export default function SalesChart() {
-	const [selectedYear, setSelectedYear] = useState("2023");
+	const [selectedYear, setSelectedYear] = useState("2024");
 	const [selectedCell, setSelectedCell] = useState(0);
 
 	const [runGetSales, { loading, data }] = useServerAction<
@@ -103,7 +103,7 @@ export default function SalesChart() {
 							defaultSelectedKeys={[selectedYear]}
 							onChange={(e) => setSelectedYear(e.target.value)}
 						>
-							{getAllYearsFrom(2023).map((year) => (
+							{getAllYearsFrom(2024).map((year) => (
 								<SelectItem key={year} value={year.toString()}>
 									{year.toString()}
 								</SelectItem>

src/app/(dashboard)/variables/_sections/AddVariableForm.tsx

@@ -0,0 +1,120 @@
+import { createVariables, updateVariables } from "@/actions/variables";
+import TextField from "@/components/shared/input/TextField";
+import { useReactHookForm } from "@/hooks/useReactHookForm";
+import { useServerAction } from "@/hooks/useServerAction";
+import { CreateVariableDto, createVariableSchema } from "@/rules/validations";
+import { Variables } from "@/types";
+import { getErrorMessage } from "@/utils/helpers";
+import {
+	Button,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from "@nextui-org/react";
+import { useEffect } from "react";
+import { toast } from "sonner";
+
+interface Props {
+	isOpen: boolean;
+	onClose: () => void;
+	variable: Variables | null;
+}
+export default function AddVariableForm(props: Props) {
+	const { isOpen, onClose, variable } = props;
+
+	const { control, handleSubmit, reset, setValue, clearErrors } =
+		useReactHookForm<CreateVariableDto>(createVariableSchema);
+
+	const [runCreateVariable, { loading }] = useServerAction<
+		any,
+		typeof createVariables
+	>(createVariables);
+	const [runUpdateVariable, { loading: updating }] = useServerAction<
+		any,
+		typeof updateVariables
+	>(updateVariables);
+
+	useEffect(() => {
+		setValue("label", variable?.label ?? "");
+		setValue("value", variable?.value ?? "");
+	}, [variable]);
+
+	const actionFunction = async (data: CreateVariableDto) =>
+		variable
+			? await runUpdateVariable(variable.id, data)
+			: await runCreateVariable(data);
+
+	const onSubmit = async (data: CreateVariableDto) => {
+		try {
+			const toastMessage = variable
+				? "Variable updated"
+				: "New variable created";
+
+			const response = await actionFunction(data);
+			if (response?.error) {
+				toast.error(response.error);
+				return;
+			}
+			toast.success(toastMessage);
+			reset();
+			onClose();
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	return (
+		<Modal size={"md"} isOpen={isOpen} onClose={onClose} isDismissable={false}>
+			<ModalContent>
+				{(onClose) => (
+					<>
+						<ModalHeader className='flex flex-col gap-1'>Variables</ModalHeader>
+						<ModalBody>
+							<TextField
+								control={control}
+								name='label'
+								defaultValue={variable?.label}
+								label='Label'
+								variant='bordered'
+								labelPlacement='outside'
+								radius='sm'
+								placeholder='Label'
+							/>
+							<TextField
+								control={control}
+								name='value'
+								defaultValue={variable?.value}
+								label='Value'
+								variant='bordered'
+								labelPlacement='outside'
+								radius='sm'
+								placeholder='Value'
+							/>
+						</ModalBody>
+						<ModalFooter>
+							<Button
+								radius='sm'
+								color='danger'
+								variant='light'
+								onPress={onClose}
+								// isDisabled={loading || updating}
+							>
+								Cancel
+							</Button>
+							<Button
+								onClick={handleSubmit(onSubmit)}
+								radius='sm'
+								color='primary'
+								isLoading={loading || updating}
+							>
+								Proceed
+							</Button>
+						</ModalFooter>
+					</>
+				)}
+			</ModalContent>
+		</Modal>
+	);
+}

src/app/(dashboard)/variables/_sections/VariableSection.tsx

@@ -0,0 +1,55 @@
+"use client";
+import HStack from "@/components/shared/layout/HStack";
+import { Variables } from "@/types";
+import { pluralize } from "@/utils/helpers";
+import { Button, useDisclosure } from "@nextui-org/react";
+import VariablesTable from "./VariablesTable";
+import { useState } from "react";
+import AddVariableForm from "./AddVariableForm";
+
+interface Props {
+	variables: Variables[];
+}
+export default function VariableSection({ variables }: Props) {
+	const [selectedVariable, setSelectedVariable] = useState<Variables | null>(
+		null,
+	);
+	const { onOpen, isOpen, onClose } = useDisclosure();
+	const totalVariables = variables?.length;
+	return (
+		<div>
+			<HStack className='items-center justify-between mb-3'>
+				<h3 className='font-semibold text-xl'>
+					{totalVariables} {pluralize("Variable", totalVariables)}
+				</h3>
+				<Button
+					radius='sm'
+					size='md'
+					color='primary'
+					disableRipple
+					className='font-semibold'
+					onClick={() => {
+						setSelectedVariable(null);
+						onOpen();
+					}}
+				>
+					Add Variable
+				</Button>
+			</HStack>
+			<VariablesTable
+				variables={variables}
+				onEdit={(variable) => {
+					setSelectedVariable(variable);
+					onOpen();
+				}}
+			/>
+			<AddVariableForm
+				isOpen={isOpen}
+				onClose={() => {
+					onClose();
+				}}
+				variable={selectedVariable}
+			/>
+		</div>
+	);
+}

src/app/(dashboard)/variables/_sections/VariablesTable.tsx

@@ -0,0 +1,81 @@
+"use client";
+import EmptyContent from "@/components/shared/EmptyContent";
+import HStack from "@/components/shared/layout/HStack";
+import { Variables } from "@/types";
+import { pluralize } from "@/utils/helpers";
+import {
+	Button,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+	useDisclosure,
+} from "@nextui-org/react";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import React, { useState } from "react";
+
+interface Props {
+	variables: Variables[];
+	onEdit: (variable: Variables) => void;
+}
+export default function VariablesTable({ variables, onEdit }: Props) {
+	const [selectedVariable, setSelectedVariable] = useState<Variables | null>(
+		null,
+	);
+	const { onOpen, isOpen, onClose } = useDisclosure();
+
+	return (
+		<div className='border p-3 rounded-md'>
+			<Table aria-label='list of variables' shadow='none' radius='none'>
+				<TableHeader>
+					<TableColumn className='w-1/2'>Name</TableColumn>
+					<TableColumn>Value</TableColumn>
+					<TableColumn>{null}</TableColumn>
+				</TableHeader>
+				<TableBody
+					emptyContent={
+						<EmptyContent
+							// img={illustration_empty_content}
+							title=''
+							description='No Variables added'
+						/>
+					}
+				>
+					{variables.map((variable) => (
+						<TableRow key={variable?.id}>
+							<TableCell>{variable?.label}</TableCell>
+							<TableCell>{variable?.value}</TableCell>
+							<TableCell>
+								<HStack className='items-center justify-end'>
+									<Button
+										radius='sm'
+										size='sm'
+										disableRipple
+										color='danger'
+										onClick={() => setSelectedVariable(variable)}
+										isIconOnly
+										disabled
+									>
+										<Trash2Icon className='text-white' size={15} />
+									</Button>
+									<Button
+										radius='sm'
+										size='sm'
+										disableRipple
+										color='success'
+										onClick={() => onEdit(variable)}
+										isIconOnly
+									>
+										<PencilIcon className='text-white' size={20} />
+									</Button>
+								</HStack>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	);
+}

src/app/(dashboard)/variables/page.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import VariablesTable from "./_sections/VariablesTable";
+import { getVariables } from "@/actions/variables";
+import WithServerError from "@/components/hoc/WithServerError";
+import VariableSection from "./_sections/VariableSection";
+
+export default async function Variables() {
+	const { error, results } = await getVariables();
+	return (
+		<WithServerError error={error}>
+			<div className='bg-white h-screen px-5 pt-5'>
+				<VariableSection variables={results!} />
+			</div>
+		</WithServerError>
+	);
+}

src/config/constants/navigations.ts

@@ -1,4 +1,5 @@
 import {
+	ArrowLeftRightIcon,
 	BadgePercentIcon,
 	BarChartBigIcon,
 	BookMarkedIcon,
@@ -39,4 +40,9 @@ export const SIDEBAR_NAVIGATION = [
 		icon: BadgePercentIcon,
 		href: DASHBOARD_PATHS.specials.root,
 	},
+	{
+		label: "Variables",
+		icon: ArrowLeftRightIcon,
+		href: DASHBOARD_PATHS.variables.root,
+	},
 ];

src/config/routes.ts

@@ -36,6 +36,9 @@ export const DASHBOARD_PATHS = {
 	users: {
 		root: path(DASHBOARD_ROOT, "users"),
 	},
+	variables: {
+		root: path(DASHBOARD_ROOT, "variables"),
+	},
 	specials: {
 		root: path(DASHBOARD_ROOT, "specials"),
 		new: (query?: Query) =>

src/lib/apiConfig.ts

@@ -80,4 +80,8 @@ export const apiConfig = {
 		root: () => `reviews`,
 		get: (ratingId: string) => `reviews/${ratingId}`,
 	},
+	variables: {
+		root: () => `variables`,
+		get: (variableId: string) => `variables/${variableId}`,
+	},
 };

src/rules/validations/index.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const createVariableSchema = z.object({
+	label: z.string({ required_error: "variable name is required" }),
+	value: z.string({ required_error: "variable value is required" }),
+});
+
+export type CreateVariableDto = z.infer<typeof createVariableSchema>;