feat: ✨ changes

.gitignore

@@ -1,13 +1,13 @@
-node_modules
-dist
+node_modules/
+dist/
 
 
 # Rust
-target
+target/
 prisma.rs
 src-tauri/dev.db 
 src-tauri/app.db 
+src-tauri/gen/
 
 
-.signore
-
+.signore

src/index.tsx

@@ -5,11 +5,14 @@ import "uno.css";
 
 const Overview = lazy(() => import("./screens/Dashboard/pages"));
 const Invoices = lazy(() => import("./screens/Dashboard/pages/Sales/Invoices"));
-const createinvoice = lazy(() => import("./screens/Dashboard/pages/Sales/Invoices/createInvoice.tsx"));
+const CreateInvoice = lazy(() => import("./screens/Dashboard/pages/Sales/Invoices/CreateInvoice.tsx"));
 const Templates = lazy(() => import("./screens/Dashboard/pages/Sales/Templates"));
 const Schedules = lazy(() => import("./screens/Dashboard/pages/Sales/Schedules"));
 const Expenses = lazy(() => import("./screens/Dashboard/pages/Purchase/Expenses"));
 const Clients = lazy(() => import("./screens/Dashboard/pages/Other/Clients"));
+const ClientDetail = lazy(() => import("./screens/Dashboard/pages/Other/Clients/ClientDetail"));
+const CreateClient = lazy(() => import("./screens/Dashboard/pages/Other/Clients/CreateClient"));
+const InvoiceDetail = lazy(() => import("./screens/Dashboard/pages/Sales/Invoices/InvoiceDetail"));
 const Reports = lazy(() => import("./screens/Dashboard/pages/Other"));
 const Settings = lazy(() => import("./screens/Dashboard/pages/Settings"));
 const Dashboard = lazy(() => import("./screens/Dashboard"));
@@ -37,12 +40,17 @@ render(
         <Route path="/sales">
           <Route path="/invoices">
             <Route path="/" component={Invoices} />
-            <Route path="/new" component={createinvoice} />
+            <Route path="/:id" component={InvoiceDetail} />
+            <Route path="/new" component={CreateInvoice} />
           </Route>
           <Route path="/templates" component={Templates} />
           <Route path="/schedules" component={Schedules} />
         </Route>
-        <Route path="/other/clients" component={Clients} />
+        <Route path="/other/clients">
+          <Route path="/" component={Clients} />
+          <Route path="/:id" component={ClientDetail} />
+          <Route path="/new" component={CreateClient} />
+        </Route>
         <Route path="/other/reports" component={Reports} />
         <Route path="/purchase/expenses" component={Expenses} />
         <Route path="/settings" component={Settings} />

src/screens/Dashboard/components/Sidebar/Section.tsx

@@ -7,7 +7,7 @@ interface ISidebarSectionProps {
 const SidebarSection: ParentComponent<ISidebarSectionProps> = (props) => {
   return (
     <>
-      <div class="mt-4 text-xs font-medium text-grey">{props.title}</div>
+      <div class="mt-4 text-xs font-medium text-secondary">{props.title}</div>
       <div class="">{props.children}</div>
     </>
   );

src/screens/Dashboard/components/Sidebar/index.tsx

@@ -125,7 +125,7 @@ const Sidebar: Component = () => {
                   >
                     <ListboxOptions
                       unmount={false}
-                      class="absolute bottom-full w-full py-1 mb-1 overflow-auto text-base bg-secondary rounded-md shadow-menu max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                      class="absolute bottom-full w-full py-1 mb-1 overflow-auto text-base bg-primary rounded-md shadow-menu max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                     >
                       <For each={companies()}>
                         {(company): JSX.Element => (

src/screens/Dashboard/components/StatBox.tsx

@@ -19,7 +19,7 @@ const StatBox: Component<{
           <p class="text-xs font-medium">{props.title}</p>
           <div class="text-green-600 text-sm">{percentageChange(props.value, props.last)}%</div>
         </div>
-        <div class="flex flex-col justify-between text-grey gap-1">
+        <div class="flex flex-col justify-between text-secondary gap-1">
           <p class="text-xl font-medium text-primary">{props.value}</p>
           <Show when={props.last}>
             <p class="text-xs font-normal">${props.last} Previous period</p>

src/screens/Dashboard/components/Table/Pagination.tsx

@@ -24,7 +24,7 @@ const Pagination: Component<PaginationProps> = (props) => {
             class={`px-3 py-1 ${
               props.currentPage === number
                 ? "text-white bg-default shadow-md shadow-default/20"
-                : "text-primary bg-secondary"
+                : "text-primary bg-primary"
             } rounded`}
             onClick={() => props.onPageChange(number)}
           >

src/screens/Dashboard/components/TitleBar.tsx

@@ -1,17 +1,24 @@
-import { type Component, For, Show, createMemo, createSignal } from "solid-js";
+import { type Component, For, Show, createMemo } from "solid-js";
 import { useLocation, useNavigate } from "@solidjs/router";
 import { useI18n } from "@/i18n";
-import { FiArrowLeft, FiArrowRight, FiBell, FiChevronLeft, FiChevronRight, FiSearch } from "solid-icons/fi";
+import { FiBell, FiChevronLeft, FiChevronRight, FiSearch } from "solid-icons/fi";
 
 const TitleBar: Component = () => {
   const location = useLocation();
   const [t] = useI18n();
   const navigate = useNavigate();
 
+  const matchDynamicRoute = (route: string) => {
+    const dynamicRoute = route.replace(/\{.*?\}/g, "(.+)");
+    const regex = new RegExp(`^${dynamicRoute}$`);
+    const match = location.pathname.match(regex);
+    return match ? [route.split("/").slice(-1)[0], match[1]] : null;
+  };
+
   const matchPathname = createMemo(() => {
     const { pathname } = location;
-    switch (pathname) {
-      case "/dashboard/":
+    switch (pathname.replace(/\/$/, "")) {
+      case "/dashboard":
         return [t("sidebar.button.overview")];
 
       case "/dashboard/sales/invoices":
@@ -31,8 +38,18 @@ const TitleBar: Component = () => {
         return [t("sidebar.section.other"), t("sidebar.button.reports")];
       case "/dashboard/settings":
         return [t("sidebar.button.settings")];
-      default:
+      default: {
+        const clientMatch = matchDynamicRoute("/dashboard/other/clients/{id}");
+        const invoiceMatch = matchDynamicRoute("/dashboard/sales/invoices/{id}");
+        if (clientMatch) {
+          return [t("sidebar.section.other"), t("sidebar.button.clients"), clientMatch[1]];
+        }
+        if (invoiceMatch) {
+          return [t("sidebar.section.sales"), t("sidebar.button.invoices"), invoiceMatch[1]];
+        }
+
         return [];
+      }
     }
   });
 
@@ -74,10 +91,10 @@ const TitleBar: Component = () => {
                   when={index() === matchPathname().length - 1}
                   fallback={
                     <>
-                      <span class="text-grey" data-tauri-drag-region>
+                      <span class="text-secondary" data-tauri-drag-region>
                         {item}
                       </span>
-                      <span class="text-grey" data-tauri-drag-region>
+                      <span class="text-secondary" data-tauri-drag-region>
                         /
                       </span>
                     </>

src/screens/Dashboard/index.tsx

@@ -30,7 +30,7 @@ const Dashboard: ParentComponent = (props) => {
       <TitleBar />
       <div class="flex flex-row items-start w-screen">
         <Sidebar />
-        <div class="overflow-y-auto px-4 pt-14 mx-auto w-full h-screen no-scrollbar bg-secondary text-primary">
+        <div class="overflow-y-auto px-4 pt-14 mx-auto w-full h-screen no-scrollbar bg-primary text-primary">
           <div class="container">{props.children}</div>
         </div>
       </div>

src/screens/Dashboard/pages/Other/Clients/ClientDetail.tsx

@@ -0,0 +1,14 @@
+import { useParams } from "@solidjs/router";
+import type { Component } from "solid-js";
+
+const ClientDetail: Component = () => {
+  const params = useParams<{ readonly id: string }>();
+  console.log(params.id);
+  return (
+    <div>
+      <h1 class="text-4xl font-bold">Detail klienta {params.id}</h1>
+    </div>
+  );
+};
+
+export default ClientDetail;

src/screens/Dashboard/pages/Other/Clients/CreateClient.tsx

@@ -0,0 +1,11 @@
+import type { Component } from "solid-js";
+
+const CreateClient: Component = () => {
+  return (
+    <div>
+      <h1 class="text-4xl font-bold">Create Client</h1>
+    </div>
+  );
+};
+
+export default CreateClient;

src/screens/Dashboard/pages/Other/Clients/index.tsx

@@ -1,9 +1,14 @@
-import { Component } from "solid-js";
+import { Button } from "@/shared/components/Button";
+import { useNavigate } from "@solidjs/router";
+import type { Component } from "solid-js";
 
 const Clients: Component = () => {
+  const navigate = useNavigate();
   return (
     <div>
       <h1 class="text-4xl font-bold">Klienti</h1>
+      <Button onClick={() => navigate("new")}>Přidat klienta</Button>
+      <Button onClick={() => navigate("1")}>Detail klienta</Button>
     </div>
   );
 };

src/screens/Dashboard/pages/Sales/Invoices/InvoiceDetail.tsx

@@ -0,0 +1,14 @@
+import { useParams } from "@solidjs/router";
+import type { Component } from "solid-js";
+
+const InvoiceDetail: Component = () => {
+  const params = useParams<{ readonly id: string }>();
+  console.log(params.id);
+  return (
+    <div>
+      <h1 class="text-4xl font-bold">Detail faktury {params.id}</h1>
+    </div>
+  );
+};
+
+export default InvoiceDetail;

src/screens/Dashboard/pages/Sales/Invoices/createInvoice.tsx

@@ -4,8 +4,9 @@ import type { Component } from "solid-js";
 const createInvoice: Component = (props) => {
   return (
     <div class="flex flex-col lg:flex-row w-full gap-5 ">
-      <div class="w-full lg:w-1/2 bg-green">
-        <div class="flex items">cuspus</div>
+      <div class="w-full lg:w-1/2 flex flex-col">
+        <div class="flex items h-full bg-green">cuspus</div>
+        <div class="h-20 bg-green-300">cuspus</div>
       </div>
 
       <div class="w-full lg:w-1/2 bg-red rounded-xl gap-4 flex flex-col p-4">

src/screens/Dashboard/pages/Sales/Invoices/index.tsx

@@ -146,8 +146,7 @@ const Invoices: Component = () => {
   const [invoicePopover, setInvoicePopover] = createSignal(false);
 
   const handleEdit = (item: Book) => {
-    console.log("Edit:", item);
-    // Handle edit action
+    navigate(`${item.id}`);
   };
 
   const handleDelete = (item: Book) => {

src/screens/Setup/components/LanguageBox.tsx

@@ -7,7 +7,7 @@ const LangaugeBox: ParentComponent<{ onClick: () => void; active?: boolean }> =
       classList={{
         "py-4 text-3xl border text-primary border-neutral-900 rounded-md shadow-inner bg-neutral-900 px-10  transition cursor-pointer": true,
         "bg-pimary": props.active,
-        "bg-secondary": !props.active,
+        "bg-primary": !props.active,
       }}
     >
       {props.children}

src/screens/Setup/index.tsx

@@ -88,7 +88,7 @@ const SetupWizard: Component = () => {
 
   return (
     <div class="flex justify-center items-center w-screen h-screen" data-tauri-drag-region>
-      <div class="w-3/4 h-5/7 bg-secondary rounded-xl drop-shadow-xl flex items-center justify-center flex-col gap-8 relative">
+      <div class="w-3/4 h-5/7 bg-primary rounded-xl drop-shadow-xl flex items-center justify-center flex-col gap-8 relative">
         <ProgressDots count={5} active={currentStep()} />
         <Show when={currentStep() === 0}>
           <Title>{t("setup.welcome")}</Title>

src/shared/components/Menu/Input.tsx

@@ -1,5 +1,5 @@
 import { FiInfo } from "solid-icons/fi";
-import { Component, Show, createSignal } from "solid-js";
+import { type Component, Show, createSignal } from "solid-js";
 
 const Input: Component<{
   id: string;
@@ -20,7 +20,7 @@ const Input: Component<{
         id={props.id}
         type="text"
         classList={{
-          "ml-5 w-60 h-8 py-1 text-sm border text-primary border-neutral-900 rounded-md shadow-inner bg-neutral-900 px-2 focus:outline-none focus:border-primary bg-secondary": true,
+          "ml-5 w-60 h-8 py-1 text-sm border text-primary border-neutral-900 rounded-md shadow-inner bg-neutral-900 px-2 focus:outline-none focus:border-primary bg-primary": true,
           "mr-6": !props.info,
         }}
         placeholder={props.placeholder}

src/shared/components/Search.tsx

@@ -1,6 +1,6 @@
 import { useI18n } from "@/i18n";
 import { FiSearch } from "solid-icons/fi";
-import { JSX, ParentComponent } from "solid-js";
+import type { JSX, ParentComponent } from "solid-js";
 
 interface SearchProps {
   onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
@@ -10,7 +10,7 @@ export const Search: ParentComponent<SearchProps> = (props) => {
   const [t] = useI18n();
 
   return (
-    <div class="rounded-md overflow-hidden inline-flex justify-between items-center dark:bg-#353536 bg-#d1d1d1 text-base font-light ring-default/20 focus-within:ring-3 ">
+    <div class="rounded-md overflow-hidden inline-flex justify-between items-center dark:bg-#353536 bg-#d1d1d1 text-base font-light ring-default focus-within:ring-3 ">
       <FiSearch class="mx-2 my-1 text-primary" />
       <input
         type="search"

src/styles/index.css

@@ -23,8 +23,8 @@ body {
 :root,
 :root.light {
     --color-primary: #232323;
-    --color-secondary: #EAEAEB;
-    --color-grey: #52525b;
+    --color-secondary: #52525b;
+    --bg-primary: #EAEAEB;
     --color-lightgrey: #E5E7E7;
     --color-danger: #b91c1c;
     --color-warning: #f97316;
@@ -42,8 +42,8 @@ body {
 
 :root.dark {
     --color-primary: #E3E3E3;
-    --color-secondary: #262626;
-    --color-grey: #a1a1aa;
+    --color-secondary: #a1a1aa;
+    --bg-primary: #262626;
     --color-lightgrey: #E5E7E7;
     --color-danger: #f87171;
     --color-warning: #facc15;

unocss.config.ts

@@ -9,7 +9,6 @@ export default defineConfig({
       primary: "var(--color-primary)",
       secondary: "var(--color-secondary)",
       border: "var(--color-border)",
-      grey: "var(--color-grey)",
       lightgrey: "var(--color-lightgrey)",
       danger: "var(--color-danger)",
       warning: "var(--color-warning)",
@@ -30,6 +29,7 @@ export default defineConfig({
       },
     },
     backgroundColor: {
+      primary: "var(--bg-primary)",
       default: "var(--color-default)",
       fills: {
         opaque: {