5 |
6 | [Timesheet](https://timesheet.js.org/) is an application for managing and quickly accessing your daily work time. It has a minimalistic features set required and sleek design. Stop opening, closing your local text editor for persisting and calculating the timesheet and hours manually. Start using [Timesheet](https://timesheet.js.org/) now.
7 |
8 |
9 |
10 |
11 | # Table of Contents
12 | - **[How to Use](https://github.com/nishantpainter/timesheet#how-to-use)**
13 | - **[Dark Mode](https://github.com/nishantpainter/timesheet#dark-mode)**
14 | - **[Offline Usage](https://github.com/nishantpainter/timesheet#offline-usage)**
15 | - **[Development](https://github.com/nishantpainter/timesheet#development)**
16 | - **[Privacy](https://github.com/nishantpainter/timesheet#privacy)**
17 |
18 | ## How to Use
19 | You can access the application by visiting [Website](https://timesheet.js.org). The application has a features set as follows :
20 |
21 | - **Add**, **Update** and **Delete** Timesheet lines.
22 | - Quick overview of **Total Hours**.
23 | - **Imperative Time :** Normal hours input will restrict you to enter the input in the form of hours.minutes. For example 1.50 will resemble 1 hour and 50 minutes. However, Imperative time configuration will allow you to enter time in whatever number format you prefer with a single decimal point. For example, following notation of 1 hour = 1; you can enter 0.5 for 30 minutes, 0.25 for 15 minutes and likewise you can enter the hours put in for a specific task. Checking imperative time will allow you to enter time without any restriction.
24 | - **Download :** You can download the timesheet line summary in three formats including TXT, CSV and PDF.
25 |
26 | ## Dark Mode
27 | The application supports switching between two different themes, i.e light theme and dark theme. You can toggle the theme by clicking the dark mode toggle icon in the toolbar.
28 |
29 | ## Offline Usage
30 | The application is registered with service workers and behaves as a progressive web application ([PWA](https://en.wikipedia.org/wiki/Progressive_web_application)). For offline usage you can select the **Add To Home** option, while accessing application in browser, to install the application locally to your mobile devices.
31 |
32 | ## Development
33 | The application is scaffolded using create-react-app ([CRA](https://create-react-app.dev/docs/getting-started/)) with [Typescript](https://www.typescriptlang.org/) templating. You can clone the [Timesheet](https://github.com/nishantpainter/timesheet) repository for custom development.
34 |
35 | ## Privacy
36 | The application makes use of local storage for persisting your work hour lines and does not store any timesheet data on any sort of server. The application uses Google analytics to get an overview of the application usage.
37 |
--------------------------------------------------------------------------------
/src/Timesheet/containers/Sheet.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Button from "@material-ui/core/Button";
3 | import Typography from "@material-ui/core/Typography";
4 | import Dialog from "@material-ui/core/Dialog";
5 | import DialogTitle from "@material-ui/core/DialogTitle";
6 | import DialogContent from "@material-ui/core/DialogContent";
7 | import DialogActions from "@material-ui/core/DialogActions";
8 |
9 | import { useStore } from "../providers/StoreProvider";
10 | import TimesheetLineInfo from "../components/TimesheetLineInfo";
11 | import TimesheetLineList from "../components/TimesheetLineList";
12 | import TimesheetLineControl from "../components/TimesheetLineControl";
13 | import ImperativeTimeControl from "../components/ImperativeTimeControl";
14 |
15 | type ListProps = {};
16 |
17 | const List: React.FC = (props) => {
18 | const {
19 | lines = [],
20 | imperative,
21 | handleAddNewLine,
22 | handleChangeLine,
23 | handleDeleteLine,
24 | handleDeleteAllLines: handleDeleteAllLinesStore,
25 | handleChangeImperative,
26 | } = useStore();
27 |
28 | const [confirmationDialogOpen, setConfirmationDialogOpen] = React.useState<
29 | boolean
30 | >(false);
31 |
32 | const handleOpenConfirmationDialog = React.useCallback(() => {
33 | if (!(lines && lines.length)) {
34 | return;
35 | }
36 | setConfirmationDialogOpen(true);
37 | }, [lines]);
38 |
39 | const handleCloseConfirmationDialog = React.useCallback(() => {
40 | setConfirmationDialogOpen(false);
41 | }, []);
42 |
43 | const handleDeleteAllLines = React.useCallback(() => {
44 | handleDeleteAllLinesStore();
45 | handleCloseConfirmationDialog();
46 | }, [handleDeleteAllLinesStore, handleCloseConfirmationDialog]);
47 |
48 | const totalHours = lines.reduce(
49 | (totalHours, line) => totalHours + (Number(line.hours) || 0),
50 | 0
51 | );
52 |
53 | return (
54 | <>
55 |
59 |
63 |
64 |
69 |
86 |
87 | );
88 | };
89 |
90 | export default List;
91 |
--------------------------------------------------------------------------------
/src/Timesheet/components/InfoPopover.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Box from "@material-ui/core/Box";
3 | import Link from "@material-ui/core/Link";
4 | import Divider from "@material-ui/core/Divider";
5 | import Typography from "@material-ui/core/Typography";
6 | import Popover, {
7 | PopoverProps as InfoPopoverProps,
8 | } from "@material-ui/core/Popover";
9 | import { makeStyles } from "@material-ui/core/styles";
10 |
11 | import IconButton from "./IconButton";
12 |
13 | const useStyles = makeStyles((theme) => ({
14 | popoverPaper: {
15 | width: 500,
16 | padding: theme.spacing(2),
17 | },
18 | link: {
19 | color: theme.palette.primary.main,
20 | },
21 | divider: {
22 | marginBottom: theme.spacing(),
23 | },
24 | }));
25 |
26 | const CheckPoint = (props: any) => {
27 | const { children } = props;
28 | return (
29 |
30 |
31 |
32 | {children}
33 |
34 | );
35 | };
36 |
37 | const InfoPopover: React.FC = (props) => {
38 | const { open, anchorEl, onClose } = props;
39 |
40 | const classes = useStyles();
41 | return (
42 |
58 |
59 | Timesheet is a small application for managing daily task work time and
60 | to evaluate total hours of work.
61 |
62 |
63 | Hassle-free access to your timesheet lines
64 | Instant overview of total time hours
65 | Dark mode
66 | Works Offline
67 | Download timesheet in TXT, CSV and PDF format
68 |
69 |
70 | The application works offline and can be used by using
71 | 'Add to home screen' option from browser setting on mobile
72 | devices.
73 |
74 |
75 |
76 | The application do not store any consumer data and use local storage for
77 | persisting the information. Timesheet is
78 |
83 | Open-source
84 |
85 | . Pull request are welcome!
86 |
87 |
88 |
89 | Developed By :
90 |
95 | Nishant Painter
96 |
97 |
98 |
99 | );
100 | };
101 |
102 | export default InfoPopover;
103 |
--------------------------------------------------------------------------------
/src/Timesheet/providers/StoreProvider.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { v4 as uuid } from "uuid";
3 | import { useSnackbar } from "notistack";
4 | import Button from "@material-ui/core/Button";
5 |
6 | import { Line } from "../types";
7 | import StorageService from "../services/StorageService";
8 |
9 | type StoreContextType = {
10 | lines: Line[];
11 | imperative: boolean;
12 | handleChangeLine: any;
13 | handleDeleteLine: any;
14 | handleDeleteAllLines: any;
15 | handleAddNewLine: any;
16 | handleChangeImperative: any;
17 | };
18 |
19 | const defaultLines: Line[] = [];
20 |
21 | const StoreContext = React.createContext>({});
22 |
23 | const StoreProvider = (props: any) => {
24 | const { children } = props;
25 |
26 | const { enqueueSnackbar, closeSnackbar } = useSnackbar();
27 | const [lines, setLines] = React.useState(defaultLines);
28 | const [imperative, setImperative] = React.useState(
29 | StorageService.getImperative()
30 | );
31 |
32 | const fetchLines = () => {
33 | const lines = StorageService.getLines();
34 | if (lines && lines.length) {
35 | setLines(lines);
36 | }
37 | };
38 |
39 | const handleUpdateStorageLines = React.useCallback((lines) => {
40 | StorageService.setLines(lines);
41 | }, []);
42 |
43 | const handleAddNewLine = React.useCallback(() => {
44 | setLines((lines: Line[]) => {
45 | const updatedLines = [...lines, { id: uuid(), title: "", hours: "" }];
46 | handleUpdateStorageLines(updatedLines);
47 | enqueueSnackbar("Line Added", { variant: "success" });
48 | return updatedLines;
49 | });
50 | }, [handleUpdateStorageLines, enqueueSnackbar]);
51 |
52 | const handleDeleteAllLines = React.useCallback(() => {
53 | setLines([]);
54 | handleUpdateStorageLines([]);
55 | enqueueSnackbar("All Line Deleted");
56 | }, [handleUpdateStorageLines, enqueueSnackbar]);
57 |
58 | const handleDeleteLine = React.useCallback(
59 | (event, line: Line) => {
60 | const action = (key: any) => (
61 | <>
62 |
76 |
85 |
86 | );
87 |
88 | setLines((lines) => {
89 | const updatedLines = lines.filter((l) => l.id !== line.id);
90 | handleUpdateStorageLines(updatedLines);
91 | enqueueSnackbar("Line Deleted", {
92 | action,
93 | });
94 | return updatedLines;
95 | });
96 | },
97 | [handleUpdateStorageLines, enqueueSnackbar, closeSnackbar]
98 | );
99 |
100 | const handleChangeLine = React.useCallback(
101 | (event, line) => {
102 | const { name, value } = event.target;
103 |
104 | const declarativeTimeRegex = /(^\d*$)|(^\d*\.?$)|(^\d*\.[0-5]{1}$)|(^\d*\.[0-5]{1}[0-9]{1}$)/;
105 |
106 | // /^\d*\.?[0-5]?((?<=[0-5])[0-9]?)?$/; Look assertion not supported in safari
107 |
108 | const imperativeTimeRegex = /^\d*\.?\d*$/;
109 |
110 | const timeRegex = imperative ? imperativeTimeRegex : declarativeTimeRegex;
111 |
112 | if (name === "hours" && !timeRegex.test(value)) {
113 | return;
114 | }
115 |
116 | setLines((lines) => {
117 | const updatedLines = lines.map((l) =>
118 | l.id === line.id ? { ...line, [name]: value } : l
119 | );
120 | handleUpdateStorageLines(updatedLines);
121 | return updatedLines;
122 | });
123 | },
124 | [imperative, handleUpdateStorageLines]
125 | );
126 |
127 | const handleChangeImperative = React.useCallback((event) => {
128 | const { checked } = event.target;
129 | setImperative(checked);
130 | StorageService.setImperative(checked);
131 | }, []);
132 |
133 | React.useEffect(() => fetchLines(), []);
134 |
135 | const value = React.useMemo(
136 | () => ({
137 | lines,
138 | imperative,
139 | handleChangeLine,
140 | handleDeleteLine,
141 | handleDeleteAllLines,
142 | handleAddNewLine,
143 | handleChangeImperative,
144 | }),
145 | [
146 | lines,
147 | imperative,
148 | handleChangeLine,
149 | handleDeleteLine,
150 | handleDeleteAllLines,
151 | handleAddNewLine,
152 | handleChangeImperative,
153 | ]
154 | );
155 |
156 | return (
157 | {children}
158 | );
159 | };
160 |
161 | export const useStore = () => React.useContext(StoreContext);
162 |
163 | export default StoreProvider;
164 |
--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(
32 | process.env.PUBLIC_URL,
33 | window.location.href
34 | );
35 | if (publicUrl.origin !== window.location.origin) {
36 | // Our service worker won't work if PUBLIC_URL is on a different origin
37 | // from what our page is served on. This might happen if a CDN is used to
38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
39 | return;
40 | }
41 |
42 | window.addEventListener('load', () => {
43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
44 |
45 | if (isLocalhost) {
46 | // This is running on localhost. Let's check if a service worker still exists or not.
47 | checkValidServiceWorker(swUrl, config);
48 |
49 | // Add some additional logging to localhost, pointing developers to the
50 | // service worker/PWA documentation.
51 | navigator.serviceWorker.ready.then(() => {
52 | console.log(
53 | 'This web app is being served cache-first by a service ' +
54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
55 | );
56 | });
57 | } else {
58 | // Is not localhost. Just register service worker
59 | registerValidSW(swUrl, config);
60 | }
61 | });
62 | }
63 | }
64 |
65 | function registerValidSW(swUrl: string, config?: Config) {
66 | navigator.serviceWorker
67 | .register(swUrl)
68 | .then(registration => {
69 | registration.onupdatefound = () => {
70 | const installingWorker = registration.installing;
71 | if (installingWorker == null) {
72 | return;
73 | }
74 | installingWorker.onstatechange = () => {
75 | if (installingWorker.state === 'installed') {
76 | if (navigator.serviceWorker.controller) {
77 | // At this point, the updated precached content has been fetched,
78 | // but the previous service worker will still serve the older
79 | // content until all client tabs are closed.
80 | console.log(
81 | 'New content is available and will be used when all ' +
82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
83 | );
84 |
85 | // Execute callback
86 | if (config && config.onUpdate) {
87 | config.onUpdate(registration);
88 | }
89 | } else {
90 | // At this point, everything has been precached.
91 | // It's the perfect time to display a
92 | // "Content is cached for offline use." message.
93 | console.log('Content is cached for offline use.');
94 |
95 | // Execute callback
96 | if (config && config.onSuccess) {
97 | config.onSuccess(registration);
98 | }
99 | }
100 | }
101 | };
102 | };
103 | })
104 | .catch(error => {
105 | console.error('Error during service worker registration:', error);
106 | });
107 | }
108 |
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 | // Check if the service worker can be found. If it can't reload the page.
111 | fetch(swUrl, {
112 | headers: { 'Service-Worker': 'script' }
113 | })
114 | .then(response => {
115 | // Ensure service worker exists, and that we really are getting a JS file.
116 | const contentType = response.headers.get('content-type');
117 | if (
118 | response.status === 404 ||
119 | (contentType != null && contentType.indexOf('javascript') === -1)
120 | ) {
121 | // No service worker found. Probably a different app. Reload the page.
122 | navigator.serviceWorker.ready.then(registration => {
123 | registration.unregister().then(() => {
124 | window.location.reload();
125 | });
126 | });
127 | } else {
128 | // Service worker found. Proceed as normal.
129 | registerValidSW(swUrl, config);
130 | }
131 | })
132 | .catch(() => {
133 | console.log(
134 | 'No internet connection found. App is running in offline mode.'
135 | );
136 | });
137 | }
138 |
139 | export function unregister() {
140 | if ('serviceWorker' in navigator) {
141 | navigator.serviceWorker.ready
142 | .then(registration => {
143 | registration.unregister();
144 | })
145 | .catch(error => {
146 | console.error(error.message);
147 | });
148 | }
149 | }
150 |
--------------------------------------------------------------------------------
/src/Timesheet/containers/Toolbar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import moment from "moment";
3 | import AppBar from "@material-ui/core/AppBar";
4 | import Box from "@material-ui/core/Box";
5 | import MuiToolbar from "@material-ui/core/Toolbar";
6 | import Typography from "@material-ui/core/Typography";
7 | import { makeStyles } from "@material-ui/core/styles";
8 | import { jsPDF } from "jspdf";
9 |
10 | import DownloadIconButton from "../components/DownloadIconButton";
11 | import IconButton from "../components/IconButton";
12 | import InfoPopover from "../components/InfoPopover";
13 | import { useTheme } from "../providers/ThemeProvider";
14 | import { useStore } from "../providers/StoreProvider";
15 | import { DownloadExtension, Line } from "../types";
16 |
17 | const useStyles = makeStyles((theme) => ({
18 | iconButton: {
19 | marginRight: theme.spacing(1),
20 | },
21 | }));
22 |
23 | type ToolbarProps = {};
24 |
25 | const Toolbar: React.FC = (props) => {
26 | const classes = useStyles();
27 | const { handleToggleDarkTheme } = useTheme();
28 |
29 | const { lines = [] } = useStore();
30 | const [anchorEl, setAnchorEl] = React.useState(
31 | null
32 | );
33 |
34 | const handleOpenInfo = React.useCallback(
35 | (event: React.MouseEvent) => {
36 | setAnchorEl(event.currentTarget);
37 | },
38 | []
39 | );
40 |
41 | const handleCloseInfo = React.useCallback(() => {
42 | setAnchorEl(null);
43 | }, []);
44 |
45 | const handleDownloadFile = React.useCallback(
46 | (blob: Blob, fileName: string) => {
47 | const url = window.URL.createObjectURL(blob);
48 | const link = document.createElement("a");
49 | link.href = url;
50 | link.setAttribute("download", fileName);
51 | link.click();
52 | },
53 | []
54 | );
55 |
56 | const handleGetDate = React.useCallback((format: string = "DD MMM YYYY") => {
57 | return moment().format(format);
58 | }, []);
59 |
60 | const handleGetFileName = React.useCallback(
61 | (extension: DownloadExtension) => {
62 | return handleGetDate() + `.${extension.toLowerCase()}`;
63 | },
64 | [handleGetDate]
65 | );
66 |
67 | const handleGetTotalHours = React.useCallback(() => {
68 | const totalHours = lines.reduce(
69 | (totalHours, line) => totalHours + (Number(line.hours) || 0),
70 | 0
71 | );
72 | return totalHours;
73 | }, [lines]);
74 |
75 | const handleGetFormattedText = React.useCallback(
76 | (extension: DownloadExtension) => {
77 | switch (extension) {
78 | case DownloadExtension.PDF:
79 | case DownloadExtension.TXT: {
80 | const txt: string = lines.reduce(
81 | (txt: string, line: Line): string => {
82 | if (line.title || line.hours) {
83 | txt += `${line.title || ""} - ${line.hours || "0"}\n`;
84 | }
85 | return txt;
86 | },
87 | `Timesheet : ${handleGetDate()}; Total Hours : ${handleGetTotalHours()}\n============================================\n`
88 | );
89 | return txt;
90 | }
91 | case DownloadExtension.CSV: {
92 | const txt: string = lines.reduce(
93 | (txt: string, line: Line): string => {
94 | if (line.title || line.hours) {
95 | txt += `"${line.title || ""}","${line.hours || "0"}"\n`;
96 | }
97 | return txt;
98 | },
99 | '"Title","Hours"\n'
100 | );
101 | return txt;
102 | }
103 | default:
104 | return "";
105 | }
106 | },
107 | [lines, handleGetDate, handleGetTotalHours]
108 | );
109 |
110 | const handleDownloadTxt = React.useCallback(() => {
111 | const txt = handleGetFormattedText(DownloadExtension.TXT);
112 | const blob = new Blob([txt], { type: "text/plain" });
113 | handleDownloadFile(blob, handleGetFileName(DownloadExtension.TXT));
114 | }, [handleGetFormattedText, handleDownloadFile, handleGetFileName]);
115 |
116 | const handleDownloadCsv = React.useCallback(() => {
117 | const txt = handleGetFormattedText(DownloadExtension.CSV);
118 | const blob = new Blob([txt], { type: "text/plain" });
119 | handleDownloadFile(blob, handleGetFileName(DownloadExtension.CSV));
120 | }, [handleGetFormattedText, handleDownloadFile, handleGetFileName]);
121 |
122 | const handleDownloadPdf = React.useCallback(() => {
123 | const txt = handleGetFormattedText(DownloadExtension.PDF);
124 | const doc = new jsPDF();
125 | doc.text(txt, 10, 10);
126 | doc.save(handleGetFileName(DownloadExtension.PDF));
127 | }, [handleGetFormattedText, handleGetFileName]);
128 |
129 | const handleDownload = React.useCallback(
130 | (fileType) => {
131 | switch (fileType) {
132 | case DownloadExtension.TXT:
133 | handleDownloadTxt();
134 | break;
135 | case DownloadExtension.CSV:
136 | handleDownloadCsv();
137 | break;
138 | case DownloadExtension.PDF:
139 | handleDownloadPdf();
140 | break;
141 | default:
142 | return;
143 | }
144 | },
145 | [handleDownloadTxt, handleDownloadCsv, handleDownloadPdf]
146 | );
147 |
148 | return (
149 |
150 |
151 |
152 |
153 |
154 | Timesheet
155 |
156 |
157 |
158 |
164 |
169 |
170 |
171 |
176 |
177 |
178 | );
179 | };
180 |
181 | export default Toolbar;
182 |
--------------------------------------------------------------------------------
