Skip to content

Commit

Permalink
Merge pull request #33 from Cubeseed/fix/lint-issues
Browse files Browse the repository at this point in the history
[eslint] linting fixed after adding lint rules
  • Loading branch information
mihrab34 authored Nov 8, 2023
2 parents 330e6b0 + fd7c273 commit 436da8f
Show file tree
Hide file tree
Showing 21 changed files with 1,127 additions and 365 deletions.
15 changes: 14 additions & 1 deletion cubeseed_login/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,18 @@
"prettier",
"plugin:tailwindcss/recommended"
],
"plugins": ["tailwindcss"]
"plugins": ["tailwindcss"],
"rules": {
"tailwindcss/no-custom-classname": "off",
"tailwindcss/classnames-order": "warn"
},
"settings": {
"tailwindcss": {
"callees": ["cn"],
"config": "tailwind.config.js"
},
"next": {
"rootDir": true
}
}
}
4 changes: 2 additions & 2 deletions cubeseed_login/.husky/pre-commit
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
. "$(dirname -- "$0")/_/husky.sh"

cd cubeseed_login
# npx pretty-quick --staged
# npm run pre-commit
npx pretty-quick --staged
npm run pre-commit
3 changes: 2 additions & 1 deletion cubeseed_login/.prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5"
"trailingComma": "es5",
"plugins": ["prettier-plugin-tailwindcss"]
}
16 changes: 8 additions & 8 deletions cubeseed_login/app/(farmer)/dashboard/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import Navbar from "@/component/navbar/Navbar";
import DashboardNavbar from "@/component/dashboard/DashboardNavbar/DashboardNavbar";
import DashboardSidePannel from "@/component/dashboard/DashboardSidePannel";
import Navbar from "@/component/navbar/Navbar"
import DashboardNavbar from "@/component/dashboard/DashboardNavbar/DashboardNavbar"
import DashboardSidePannel from "@/component/dashboard/DashboardSidePannel"

export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
}

export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
children: React.ReactNode
}) {
return (
<div className="flex min-h-screen flex-col">
<header className="sticky inset-0 ">
<Navbar />
</header>
<div>
<aside className="w-[250px] h-screen fixed inset-0 bg-white shadow-2xl">
<DashboardSidePannel/>
<aside className="fixed inset-0 h-screen w-[250px] bg-white shadow-2xl">
<DashboardSidePannel />
</aside>
<main className="ml-[250px]">{children}</main>
</div>
</div>
);
)
}
94 changes: 48 additions & 46 deletions cubeseed_login/components/create-invoice.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
"use client";
"use client"

import Image from "next/image";
import { useState } from "react";
import billto from "@cs/public/bill-to.png";
import payto from "@cs/public/pay-to.png";
import Input from "./pieces/input";
import Textarea from "./pieces/textarea";
import Table from "./pieces/table";
import CreateSucess from "./create-success";
import { BillType, OrderType, SummaryType } from "@cs/types";
import { DashboardHeading } from "./header";
import Image from "next/image"
import { useState } from "react"
import billto from "@cs/public/bill-to.png"
import payto from "@cs/public/pay-to.png"
import Input from "./pieces/input"
import Textarea from "./pieces/textarea"
import Table from "./pieces/table"
import CreateSucess from "./create-success"
import { BillType, OrderType, SummaryType } from "@cs/types"
import { DashboardHeading } from "./header"

export default function CreateInvoice() {
const [shouldOpen, setOpen] = useState(false)
Expand All @@ -26,22 +26,22 @@ export default function CreateInvoice() {
name: "Address",
value: "Building, Street Address City, State/Province, Country",
},
];
]

const renderBiller = (item: BillType) => (
<tr>
<td className="px-3">{item.name}</td>
<td className="px-3">{item.value}</td>
</tr>
);
)

const orderHeaders = [
"Service",
"Quantity",
"kg/ml",
"Unit Price",
"Total Price",
];
]

const orderData = [
{
Expand All @@ -58,7 +58,7 @@ export default function CreateInvoice() {
price: "#5.00",
total: "₦250",
},
];
]

const renderOrder = (item: OrderType) => (
<>
Expand All @@ -79,34 +79,34 @@ export default function CreateInvoice() {
</td>
</tr>
</>
);
)

const summmaryData = [
{ name: "Total Quantity:", value: "150kg" },
{ name: "Subtotal:", value: "₦ 750.00" },
{ name: "Total Tax:", value: "₦ 00.00" },
];
]

const renderSummary = (item: SummaryType) => (
<tr>
<td className="text-right">{item.name}:</td>
<td className="text-right p-1">{item.value}</td>
<td className="p-1 text-right">{item.value}</td>
</tr>
);
)

return (
<div className="flex pt-8 px-4 justify-end relative">
<div className="relative flex justify-end px-4 pt-8">
<div>
<button
className="text-[#886634] font-light rounded-[100px] py-3 px-6 h-[44px] bg-transparent flex items-center border border-yellow-400"
className="flex h-[44px] items-center rounded-[100px] border border-yellow-400 bg-transparent px-6 py-3 font-light text-[#886634]"
onClick={() => setOpen(true)}
>
Create +
</button>
</div>
{shouldOpen && (
<div className="grid items-center h-screen w-screen fixed inset-0 backdrop-brightness-50">
<div className="w-[60%] bg-white mx-auto self-start mt-8 overflow-auto max-h-[90%] relative rounded-bl-[35px] shadow-lg">
<div className="fixed inset-0 grid h-screen w-screen items-center backdrop-brightness-50">
<div className="relative mx-auto mt-8 max-h-[90%] w-[60%] self-start overflow-auto rounded-bl-[35px] bg-white shadow-lg">
<div className="relative p-8 pb-16 text-[#002629]">
<DashboardHeading
heading="Invoice"
Expand All @@ -115,33 +115,33 @@ export default function CreateInvoice() {
subheading="Order ID &gt; Invoice ID "
/>
<span
className="grid items-center absolute right-[3%] top-[1%] cursor-pointer z-10 rounded-full"
className="absolute right-[3%] top-[1%] z-10 grid cursor-pointer items-center rounded-full"
onClick={() => setOpen(false)}
>
X
</span>
<form action="">
<div>
<h2 className="mt-8">Add Information</h2>
<div className="flex gap-4 mt-8">
<div className="mt-8 flex gap-4">
<Input label="Invoice Date" type="date" />
<Input label="Payment Due Date" type="date" />
</div>
<div className="mt-4">
<Textarea
className="w-full border rounded-[4px] border-gray-300 text-gray-900"
className="w-full rounded-[4px] border border-gray-300 text-gray-900"
name=""
id=""
rows={4}
label="Notes(optional)"
/>
<p className="font-normal text-sm text-right text-[#6A7370]">
<p className="text-right text-sm font-normal text-[#6A7370]">
200 characters left
</p>
</div>
<section>
<h4>Bill to</h4>
<div className="flex gap-4 p-6 bg-[#F0F6F6] rounded-[20px] mt-4">
<div className="mt-4 flex gap-4 rounded-[20px] bg-[#F0F6F6] p-6">
<div>
<Image
src={billto}
Expand All @@ -156,7 +156,7 @@ export default function CreateInvoice() {
</section>
<section className="mt-8">
<h4>Pay to</h4>
<div className="flex gap-4 p-6 bg-[#F0F6F6] rounded-[20px] mt-4">
<div className="mt-4 flex gap-4 rounded-[20px] bg-[#F0F6F6] p-6">
<div>
<Image
src={payto}
Expand All @@ -176,56 +176,56 @@ export default function CreateInvoice() {
headers={orderHeaders}
items={orderData}
render={renderOrder}
className="w-full font-normal text-sm border border-[#03656B] rounded-[4px] text-left"
className="w-full rounded-[4px] border border-[#03656B] text-left text-sm font-normal"
thStyle="border-b border-[#03656B]"
/>
</div>
</section>

<section className="flex justify-end mt-8">
<div className="border border-[#03656B] bg-[#F9FFFF] rounded-[4px] w-[70%] py-4 px-8">
<section className="mt-8 flex justify-end">
<div className="w-[70%] rounded-[4px] border border-[#03656B] bg-[#F9FFFF] px-8 py-4">
<Table
items={summmaryData}
render={renderSummary}
className="w-full font-normal text-sm text-[#03656B]"
className="w-full text-sm font-normal text-[#03656B]"
extra={
<tr className="text-black border-t border-[#03656B]">
<tr className="border-t border-[#03656B] text-black">
<td className="text-right">Total Estimate:</td>
<td className="text-right p-1">₦ 0,000.00</td>
<td className="p-1 text-right">₦ 0,000.00</td>
</tr>
}
/>
</div>
</section>

<section className="mt-8">
<h4 className="font-normal text-base">Sign and Date</h4>
<div className="flex mt-6 gap-4">
<h4 className="text-base font-normal">Sign and Date</h4>
<div className="mt-6 flex gap-4">
<input type="checkbox" name="" id="" />
<p className="font-normal text-sm">
<p className="text-sm font-normal">
Confirm that you have reviewed the information above.
</p>
</div>
<div className="flex gap-2 mt-6">
<div className="mt-6 flex gap-2">
<Input label="Your Signature" type="text" />
<Input label="Today's Date" type="date" />
</div>
</section>
</div>
</form>
</div>
<footer className="sticky z-10 bottom-0 left-0 bg-white shadow-[0px_-7px_10px_0px_#03656B24] p-4 text-base">
<div className="flex justify-between w-full">
<button className="text-white font-light bg-[#03656B] rounded-[100px] py-3 px-6 h-[44px] flex items-center">
<footer className="sticky bottom-0 left-0 z-10 bg-white p-4 text-base shadow-[0px_-7px_10px_0px_#03656B24]">
<div className="flex w-full justify-between">
<button className="flex h-[44px] items-center rounded-[100px] bg-[#03656B] px-6 py-3 font-light text-white">
Close
</button>
<div className="flex gap-4">
<button className="text-[#886634] font-light rounded-[100px] py-3 px-6 h-[44px] bg-transparent flex items-center border border-yellow-400">
<button className="flex h-[44px] items-center rounded-[100px] border border-yellow-400 bg-transparent px-6 py-3 font-light text-[#886634]">
Save as Draft
</button>
<button
onClick={() => setSuccess(true)}
className="text-white font-light bg-[#03656B] rounded-[100px] py-3 px-6 h-[44px] flex items-center"
className="flex h-[44px] items-center rounded-[100px] bg-[#03656B] px-6 py-3 font-light text-white"
>
Send Invoice
</button>
Expand All @@ -235,7 +235,9 @@ export default function CreateInvoice() {
</div>
</div>
)}
{isSuccess && <CreateSucess isSuccess={isSuccess} setSuccess={setSuccess} />}
{isSuccess && (
<CreateSucess isSuccess={isSuccess} setSuccess={setSuccess} />
)}
</div>
);
)
}
45 changes: 29 additions & 16 deletions cubeseed_login/components/create-success.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,49 @@
import Image from "next/image";
import check from "@cs/public/check.svg";
import ellipse from "@cs/public/ellipse.png";
import Link from "next/link";
import Image from "next/image"
import check from "@cs/public/check.svg"
import ellipse from "@cs/public/ellipse.png"
import Link from "next/link"

export interface CreateSuccessProps {
isSuccess: boolean;
setSuccess: React.Dispatch<React.SetStateAction<boolean>>;
isSuccess: boolean
setSuccess: React.Dispatch<React.SetStateAction<boolean>>
}

export default function CreateSucess({ isSuccess, setSuccess }: CreateSuccessProps) {
if(!isSuccess) return null;
export default function CreateSucess({
isSuccess,
setSuccess,
}: CreateSuccessProps) {
if (!isSuccess) return null
return (
<div className="grid items-center h-screen w-screen fixed inset-0 backdrop-brightness-[30%]">
<div className="grid place-items-center w-[60%] py-8 px-8 bg-white text-primary-100 mx-auto max-h-[90%] shadow-lg relative rounded-[25px]">
<div className="fixed inset-0 grid h-screen w-screen items-center backdrop-brightness-[30%]">
<div className="text-primary-100 relative mx-auto grid max-h-[90%] w-[60%] place-items-center rounded-[25px] bg-white p-8 shadow-lg">
<span
className="grid items-center absolute right-[3%] top-[1%] cursor-pointer z-10"
className="absolute right-[3%] top-[1%] z-10 grid cursor-pointer items-center"
onClick={() => setSuccess(false)}
>
X
</span>
<div>
<Image src={check} alt={check} />
</div>
<p className="text-[22px] font-medium">Your invoice has been sent successfully!</p>
<p className="text-[22px] font-medium">
Your invoice has been sent successfully!
</p>
<p>Your invoice can now be downloaded.</p>
<div className="w-full flex justify-between font-medium mt-20">
<button onClick={() => setSuccess(false)} className="text-accent rounded-[100px] py-3 px-6 h-[44px] bg-transparent flex items-center border-2 border-secondary">
<div className="mt-20 flex w-full justify-between font-medium">
<button
onClick={() => setSuccess(false)}
className="text-accent border-secondary flex h-[44px] items-center rounded-[100px] border-2 bg-transparent px-6 py-3"
>
Close
</button>
<Link className="bg-secondary text-black rounded-[100px] py-3 px-6 h-[44px] flex items-center" href="dashboard/invoice">View Invoice</Link>
<Link
className="bg-secondary flex h-[44px] items-center rounded-[100px] px-6 py-3 text-black"
href="dashboard/invoice"
>
View Invoice
</Link>
</div>
</div>
</div>
);
)
}
Loading

0 comments on commit 436da8f

Please sign in to comment.